import { OnDestroy, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { MalihuScrollbarService } from 'ngx-malihu-scrollbar';
export const scrollbarOptions: MCustomScrollbar.CustomScrollbarOptions = { axis: 'y', theme: 'minimal-dark' };

export class MalihuScrollbarComponent implements AfterViewInit, OnDestroy {
    protected scrollbar$: Array<string> = [];

    constructor(protected changeDetectorRef$: ChangeDetectorRef, protected mScrollbarService$: MalihuScrollbarService) {}

    scrolled() {}

    /**
     * 更新滚动视图
     */
    updateScrollbarView() {
        this.updateDetectorRefView();
        this.scrollbar$.forEach(ele => {
            this.mScrollbarService$.update(ele);
        });
    }

    /**
     * 更新页面视图
     */
    updateDetectorRefView() {
        if (!this.changeDetectorRef$['destroyed']) {
            this.changeDetectorRef$.markForCheck();
            this.changeDetectorRef$.detectChanges();
        }
    }

    ngAfterViewInit() {
        this.scrollbar$.forEach(ele => {
            this.mScrollbarService$.initScrollbar(ele, {
                ...scrollbarOptions,
                callbacks: {
                    onTotalScrollOffset: 200,
                    onTotalScroll: () => {
                        this.scrolled();
                    }
                }
            });
        });
    }

    ngOnDestroy() {
        this.scrollbar$.forEach(ele => {
            this.mScrollbarService$.destroy(ele);
        });
    }
}
